<template>
  <t-table
    row-key="id"
    table-layout="auto"
    height="60vh"
    :data="orderStore.getList()"
    :columns="columns"
    :pagination="orderStore.page"
    :loading="orderStore.page.loading"
    @page-change="({ current, pageSize }) => orderStore.reset(current, pageSize)"
    :selectedRowKeys="select"
    @select-change="selectChange"
    hover
  >
    <template #number="{ row }">
      <b>{{ row.number }}</b>
    </template>
    <template #status="{ row }">
      <t-tag theme="primary" variant="light">
        {{ plugin.t('order.status_text.' + row.status) }}
      </t-tag>
    </template>
    <template #price="{ row }">
      <div class="wrap">
        {{ app.money.format(row.price) }}
        <t-divider layout="vertical" />
        {{ app.money.format(row.voucher * -1) }}
      </div>
    </template>
    <template #time="{ row }">
      {{ row.created_time.format() }}
    </template>
    <template #right="{ row }">
      <t-dropdown :min-column-width="88" trigger="click" @click="item => emit(item.value, row)">
        <t-button theme="primary" variant="text">
          {{ $t('common.active') }} 
          <template #suffix><t-icon name="chevron-down" size="14" /></template>
        </t-button>
        <template #dropdown>
          <t-dropdown-menu>
            <t-dropdown-item value="info">{{ $t('common.info') }}</t-dropdown-item>
          </t-dropdown-menu>
        </template>
      </t-dropdown>
    </template>
  </t-table>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import orderStore from '../../store/order'

  const emit = defineEmits(['info'])
  const plugin = index.plugin
  const columns = [{
    colKey: 'row-select',
    type: 'multiple',
    width: 50,
  }, {
    title: plugin.t('order.number'),
    colKey: 'number',
    cell: 'number',
    width: 160
  }, {
    title: plugin.t('order.ticket'),
    colKey: 'ticket'
  }, {
    title: plugin.t('order.name'),
    colKey: 'name'
  }, {
    title: plugin.t('order.count'),
    colKey: 'count',
    cell: 'count',
  }, {
    title: plugin.t('order.price') +  '/' + plugin.t('order.voucher'),
    colKey: 'price',
    cell: 'price'
  }, {
    title: plugin.t('order.status'),
    colKey: 'status',
    cell: 'status'
  }, {
    title: plugin.t('order.time'),
    colKey: 'time',
    cell: 'time',
    width: 150
  },{
    colKey: 'right',
    align: 'right',
    cell: 'right',
    fixed: 'right',
    width: 100
  }]

  const select = orderStore.select
  const selectChange = (data, ctx) => {
    select.value = data
    // 更新选择的原数据集
    orderStore.selectData = ctx.selectedRowData.reverse()
  }

  orderStore.get()
</script>